<script setup>
import { onMounted, reactive, ref } from 'vue';
import { orderListApi, orderItemListApi } from'@/apis/oms/order';
import { Search, Delete, EditPen, Plus, Promotion, Refresh } from '@element-plus/icons-vue'
import { orderStatusMap, orderStatusList, sourceTypeMap, payTypeMap } from'@/utils/dataEnum';

// 参数
const params = reactive({
  orderSn: '',
  status: '',
  page:1,
  pageSize:10,
})

// 获取数据
const loading = ref(false)
const orders = ref({})
const orderList = async() => {
  loading.value = true
  const res = await orderListApi(params)
  orders.value = res.data
  loading.value = false
}

// 搜索
const handleSearch = () => {
  orderList()
}

// 重置
const handleRefresh = () => {
  params.orderSn = '';
  params.status = '';
  params.page = 1;
  params.pageSize = 1;
  orderList()
}

// 分页
const disabled = ref(false)
const background = ref(false)
const handleSizeChange = (val) => {
    params.pageSize = val;
    params.page = 1;
    orderList()
}
const handleCurrentChange = (val) => {
    params.page = val;
    orderList()
}

const orderItems = ref({})
const dialogTableVisible = ref(false)
const handleLook = async(id) => {
  const res = await orderItemListApi({orderId:id});
  orderItems.value = res.data
  dialogTableVisible.value = true
}

onMounted(()=>{
  orderList()
})
</script>

<template>
  <div class="container" v-loading="loading">
    <el-row>
      <el-col :span="24" style="display: flex;justify-content: flex-start;align-items: center;margin-bottom: 10px;">
        <span style="display: inline-block;width: 70px;">订单号</span>
        <el-input v-model="params.orderSn" placeholder="请输入订单号" clearable style="width: 280px;" />
        <span style="display: inline-block;width: 70px;margin-left: 10px;">订单状态</span>
        <el-select v-model="params.status" clearable placeholder="请选择订单状态" style="width: 280px;">
          <el-option :key="item.value" :label="item.label" :value="item.value" v-for="(item, index) in orderStatusList"/>
        </el-select>
        <el-button type="primary" :icon="Search" style="margin-left: 10px;" @click="handleSearch">搜索</el-button>
        <el-button @click="handleRefresh" :icon="Refresh">重置</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-table :data="orders.list" style="width: 100%" row-key="id">
          <el-table-column prop="orderSn" label="订单号" align="center"/>
          <el-table-column prop="createTime" label="创建时间" align="center"/>
          <el-table-column prop="totalAmount" label="订单金额" align="center"/>
          <el-table-column prop="sourceType" label="订单来源" align="center">
            <template v-slot="scoped">
              <div>{{ sourceTypeMap[scoped.row.sourceType].label }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="payType" label="支付方式" align="center">
            <template v-slot="scoped">
              <div>{{ payTypeMap[scoped.row.payType].label }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="订单状态" align="center">
            <template v-slot="scoped">
              <div>{{orderStatusMap[scoped.row.status].label}}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="235" fixed="right" align="center">
            <template v-slot="scoped">
              <el-button type="primary" text size="small" :icon="EditPen"
                @click="handleLook(scoped.row.id)">查看</el-button>
              <!-- <el-button type="primary" text size="small" :icon="Delete"
                @click="handleRemove(scoped.row.id)" v-if="scoped.row.status===3 || scoped.row.status===4 || scoped.row.status===5">删除</el-button> -->
                <!-- <el-button type="primary" text size="small" :icon="Promotion"
                @click="handleRemove(scoped.row.id)" v-if="scoped.row.status===1">发货</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <div class="pageination">
            <el-pagination
                v-model:current-page="orders.page"
                v-model:page-size="orders.pageSize"
                :page-sizes="[10, 20, 30, 40]"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="orders.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>

        <el-dialog v-model="dialogTableVisible" title="Shipping address" width="80%">
          <el-table :data="orderItems.list">
            <el-table-column property="orderSn" label="订单号" width="180" align="center"/>
            <el-table-column property="skuName" label="spu名称" width="250" align="center"/>
            <el-table-column property="skuName" label="sku名称" width="250" align="center"/>
            <el-table-column property="skuPrice" label="sku价格" align="center"/>
            <el-table-column property="payPrice" label="实付价格" align="center"/>
            <el-table-column property="skuQuantity" label="购买数量" align="center"/>
          </el-table>
        </el-dialog>
  </div>
</template>

<style scoped lang='scss'>

</style>